<template>
  <div class="list-box">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-cell
        v-for="film in dataList"
        :key="film.filmId"
        @click="goDetail(film.filmId)"
      >
        <img :src="film.poster" alt="" />
        <div class="film-info">
          <h3>{{ film.name }}</h3>
          <span class="film-type">{{ film.item.name }}</span>
          <p>
            {{ film.grade ? "观众评分" : ""
            }}<span class="grade">{{ film.grade }}</span>
          </p>
          <p>主演：{{ film.actors | actorsFilter }}</p>
          <p>{{ film.nation + " | " + film.runtime }}分钟</p>
        </div>
        <div class="buy-box">购票</div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import http from "@/utils/http.js";
import Vue from "vue";
Vue.filter("actorsFilter", (actors) => {
  if (!actors) return "暂无主演";
  return actors.map((item) => item.name).join(" ");
});
export default {
  props: ["type"],
  data() {
    return {
      dataList: [],
      loading: false,
      finished: false,
      current: 1, //当前已加载的页数
      total: 0, // 总共数据条数
    };
  },
  mounted() {
    let url = `/gateway?cityId=440100&pageNum=1&pageSize=10&type=${this.type}&k=2027543`;
    http({
      url,
      headers: {
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((res) => {
      console.log(res);
      this.dataList = res.data.data.films;
      this.total = res.data.data.total;
    });
  },
  methods: {
    goDetail(id) {
      //   console.log(id);
      this.$router.history.push("/detail/" + id);
    },
    onLoad() {
      console.log("到底了");
      //判断数据是否加载完毕，数据请求完毕后，终止程序，免费无限请求的bug
      if (this.dataList.length === this.total) {
        //没有数据了
        this.finished = true;
        return;
      }
      //1,继续发送ajax请求，
      //2,追加请求回来的数据到this.dataList中
      //3,设置this.loading=false

      this.current++; //修改请求页码
      http({
        //根据页码请求数据
        url: `/gateway?cityId=440100&pageNum=${this.current}&pageSize=10&type=${this.type}&k=792875`,
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
      }).then((res) => {
        //console.log(res.data.data.films)
        //当请求没有数据时res.data.data.films返回空数组，会出现无限请求的bug
        this.dataList = [...this.dataList, ...res.data.data.films];
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-box {
  padding-bottom: 50px;
  .van-cell {
    padding: 0;
  }
  .van-cell__value--alone {
    overflow: hidden;
    padding: 10px;
    border-bottom: 1px solid #eee;
    position: relative;
    img {
      float: left;
      width: 80px;
    }
    .film-info {
      margin-left: 80px;
      text-align: left;
      padding: 10px 10px 0;
      h3 {
        display: inline;
        vertical-align: middle;
      }
      .film-type {
        color: #fff;
        background-color: #ccc;
        margin-left: 10px;
        padding: 1px 2px;
        font-size: 12px;
      }
      p {
        font-size: 14px;
        margin: 4px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 228px;
        .grade {
          color: #ff5f16;
          margin-left: 10px;
        }
      }
    }
    .buy-box {
      font-size: 12px;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid #ff5f16;
      color: #ff5f16;
      padding: 2px 4px;
      border-radius: 2px;
    }
  }
}
</style>

